<template lang="html">
  <div class="public-page">
    <div class="banner">
			<div class='banner-top'>
				<span class="title">{{pTitle}}</span>
				<div class="tu-biao">
					<router-link to='/maps'><i class="el-icon-location"></i></router-link>
					<router-link to='/setting'><i class="el-icon-setting"></i></router-link>
				</div>
			</div>
			<div class='banner-cen'>
				<div class="tu">

				</div>
				<div class="info">
					<div class="info-left">
						<span>大卡</span><span>0</span>
					</div>
					<div class="info-right">
						<span>公里</span><span>3.6</span>
					</div>
					<div class="btn">暂停</div>
				</div>
			</div>
		</div>
    <div class="separate-line"></div>
		<div class="jianzou-info">
			<h2>周好友{{pTitle}}排名</h2>
      <FriendRanking />
		</div>

  </div>
</template>

<script>
import FriendRanking from './FriendRanking';
export default {
  props:{
    pTitle:{
      type:String,
      default:''
    }
  },
  components:{
    FriendRanking
  }
}
</script>

<style scoped lang='less'>
.public-page{
	.banner{
		position: relative;
		background-color: #fff;

		overflow: hidden;
		.banner-top{
			overflow: hidden;
      height: 100/100rem;
			.title{
				position: absolute;
				left:20/100rem;
				top:25/100rem;
				font-size: 30/100rem;
			}
			.tu-biao{
				position: absolute;
				right:20/100rem;
				top:15/100rem;
				letter-spacing: 20/100rem;
				font-size: 40/100rem;
        i{
          color: #171818;
        }
			}
		}
		.banner-cen{
			margin: 0 auto;
      height: 500/100rem;
			.tu{
				height: 215/100rem;
        width: 100%;
        background: pink;
			}
			.info{
        margin-top: 30px;
				overflow: hidden;
				text-align: center;
        color: #171818;
        font-size: 14px;
				.info-left,.info-right{
					float: left;
					span{
						display: block;
						line-height: 40/100rem;
					}
					span:nth-child(2){
						line-height: 24/100rem;
					}
				}
				.info-left{
					margin-left: 2.4rem
				}
				.info-right{
					margin-left: 1.3rem
				}
				.btn{
          font-size: 30/100rem;
					position: absolute;
					width: 390/100rem;
					height: 70/100rem;
					line-height: 80/100rem;
					top: 490/100rem;
					left:170/100rem;
					background-color:#fed906;
					color:#171818;
					border-radius: 40/100rem;
					vertical-align: middle;
				}
			}

		}
	}
  .separate-line{
    height: 15/100rem;
    width: 100%;
    background: rgb(239,239,239);
  }
	.jianzou-info{
		margin-top: 15/100rem;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 98/100rem;
		h2{
      margin-top: 5px;
			margin-left: 20/100rem;
			font-size: 40/100rem;
			color: #171818;
			letter-spacing: 2/100rem;
      font-weight: 400;
		}
	}
}

</style>
